<template>
  <section class="todoapp">
    <header class="header">
      <h1>比特人记事本</h1>
      <input 
        placeholder="请输入任务"
        class="new-todo"
        v-model="newTask"
        @keydown.enter="onAdd" 
      />
      <button class="add" @click="onAdd">添加任务</button>
    </header>
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="item, index in todoList">
          <div class="view">
            <span class="index"> {{  index + 1  }} </span>
            <label>{{ item.name }}</label>
            <button class="destroy" @click="onDel(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">合计：<strong>{{ todoList.length }}</strong></span>
      <button class="clear-completed" @click="onDelAll">清空任务</button>
    </footer>
  </section>
</template>

<script setup>
    import "./styles/index.css"

    import { ref } from 'vue'
    // 代办任务列表
    const todoList = ref([
        { id: 321, name: '吃饭', finished: false },
        { id: 666, name: '睡觉', finished: true },
        { id: 195, name: '打⾖⾖', finished: false }
    ])

    const newTask = ref('')

    const onAdd = () =>{
        const name = newTask.value.trim()
        if(!newTask) return alert("不能添加空字符串任务")

        todoList.value.push({ name, id:Date.now(), finished: false })

        newTask.value = ''
    }

    const onDel = (index) =>{
        if(confirm("确认删除该任务吗？")){
            todoList.value.splice(index, 1)
        }
    }

    const onDelAll = () =>{
        todoList.value = []
    }
    
</script>

<style scoped>

</style>